<template>
  <div>
    <div ref="header" class="header">
      <van-icon size="22px" class="back" @click="back" name="arrow-left" />
      <input
        ref="input"
        v-model="question"
        @input="getqa"
        type="text"
        placeholder="搜索新房/二手房/租房相关问题"
      />
      <van-icon color="#333" class="icons" name="search" size="20px" />
    </div>
    <img class="qabg" src="../../assets/qabg.png" alt="" />
    <div class="showword">
      <div>暖暖问答</div>
      <div>已有<span class="num">2986</span>位用户的问题得到解决</div>
    </div>
    <div v-show="!question">
      <div class="change">
        <div ref="tip1" @click="changetip1(1)" class="active">购房知识</div>
        <div ref="tip2" @click="changetip2(2)">租房贴士</div>
        <div ref="tip3" @click="changetip3(3)">其他问题</div>
      </div>
      <div class="asklist">
        <div
          v-for="(item, index) in qalist"
          :key="index"
          @click="jumptoqadetail(item.question, item.answer)"
        >
          <div class="tbox">
            <img src="../../assets/qaask.png" alt="" /><span>{{
              item.question
            }}</span>
          </div>
          <div class="bbox">
            <img src="../../assets/qaanswer.png" alt="" />
            <div
              v-html="item.answer"
              class="van-multi-ellipsis--l2 wcontent"
            ></div>
          </div>
        </div>
        <div class="bottomline">
          -------------------- 我也是有底线的 --------------------
        </div>
      </div>
    </div>
    <div class="showsearch" v-show="question">
      <div v-show="searchlist.length != 0" class="asklist">
        <div
          v-for="(item, index) in searchlist"
          :key="index"
          @click="jumptoqadetail(item.question, item.answer)"
        >
          <div class="tbox">
            <img src="../../assets/qaask.png" alt="" /><span>{{
              item.question
            }}</span>
          </div>
          <div class="bbox">
            <img src="../../assets/qaanswer.png" alt="" />
            <div
              v-html="item.answer"
              class="van-multi-ellipsis--l2 wcontent"
            ></div>
          </div>
        </div>
        <div class="bottomline">
          -------------------- 我也是有底线的 --------------------
        </div>
      </div>
      <div v-show="searchlist.length == 0" class="noask">
        <img src="../../assets/qano.png" alt="" />
        <div>抱歉！系统暂时无法自动解决你的问题</div>
        <div>
          请咨询
          <a style="color: #45b7cb" href="tel:4000007173">400-000-7173</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchQa, getQalist } from "../../apis/user.js";
export default {
  data() {
    return {
      question: "",
      perPage: 10,
      scurrentPage: 1,
      lcurrentPage: 1,
      searchlist: [],
      qalist: [],
      type: 1,
      loading: false,
    };
  },
  created() {
    this.getqalist();
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    async getqalist() {
      let _this = this;
      await getQalist({
        type: this.type,
        perPage: this.perPage,
        currentPage: this.lcurrentPage,
      }).then((res) => {
        if (res.code == 201) {
          _this.qalist = res.result.list;
          if (res.result.list.length == 10) {
            _this.loading = true;
          }
        }
      });
    },
    getqa() {
      this.scurrentPage = 1;
      let _this = this;
      _this.$toast.loading({
        duration: 0,
        message: "加载中...",
        forbidClick: true,
      });
      searchQa({
        question: this.question,
        perPage: this.perPage,
        currentPage: this.scurrentPage,
      }).then((res) => {
        if (res.code == 201) {
          _this.searchlist = res.result.list;
          _this.$toast.clear();
          if (res.result.list.length == 10) {
            _this.loading = true;
          } else {
            _this.loading = false;
          }
        }
      });
    },
    jumptoqadetail(q, a) {
      let qa = { question: q, answer: a };
      this.$router.push({ path: "/qadetail", query: { qa: qa } });
    },
    changetip1(n) {
      let _this = this;
      this.type = n;
      this.lcurrentPage = 1;
      this.$refs.tip1.classList.add("active");
      this.$refs.tip2.classList.remove("active");
      this.$refs.tip3.classList.remove("active");
      getQalist({
        type: this.type,
        perPage: this.perPage,
        currentPage: this.lcurrentPage,
      }).then((res) => {
        if (res.code == 201) {
          _this.qalist = res.result.list;
          if (res.result.list.length == 10) {
            _this.loading = true;
          } else {
            _this.loading = false;
          }
        }
      });
    },
    changetip2(n) {
      let _this = this;
      this.type = n;
      this.lcurrentPage = 1;
      this.$refs.tip1.classList.remove("active");
      this.$refs.tip2.classList.add("active");
      this.$refs.tip3.classList.remove("active");
      getQalist({
        type: this.type,
        perPage: this.perPage,
        currentPage: this.lcurrentPage,
      }).then((res) => {
        if (res.code == 201) {
          _this.qalist = res.result.list;
          if (res.result.list.length == 10) {
            _this.loading = true;
          } else {
            _this.loading = false;
          }
        }
      });
    },
    changetip3(n) {
      let _this = this;
      this.type = n;
      this.lcurrentPage = 1;
      this.$refs.tip1.classList.remove("active");
      this.$refs.tip2.classList.remove("active");
      this.$refs.tip3.classList.add("active");
      getQalist({
        type: this.type,
        perPage: this.perPage,
        currentPage: this.lcurrentPage,
      }).then((res) => {
        if (res.code == 201) {
          _this.qalist = res.result.list;
          if (res.result.list.length == 10) {
            _this.loading = true;
          } else {
            _this.loading = false;
          }
        }
      });
    },
    showScroll() {
      let _this = this;
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      let windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      let scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      if (scrollTop > 120) {
        this.$refs.header.style.backgroundColor = "#fff";
        this.$refs.header.style.color = "#333";
        this.$refs.input.style.backgroundColor = "#eee";
      } else {
        this.$refs.header.style.backgroundColor = "";
        this.$refs.header.style.color = "#fff";
        this.$refs.input.style.backgroundColor = "rgba(255, 255, 255, 0.7)";
      }
      if (
        scrollTop + windowHeight >= scrollHeight - 20 &&
        this.loading &&
        this.question
      ) {
        this.scurrentPage++;
        searchQa({
          question: this.question,
          perPage: this.perPage,
          currentPage: this.scurrentPage,
        }).then((response) => {
          if (response.result.list.length != 10) {
            _this.loading = false;
          }
          _this.searchlist = [...this.searchlist, ...response.result.list];
        });
      } else if (
        scrollTop + windowHeight >= scrollHeight - 20 &&
        this.loading &&
        !this.question
      ) {
        this.lcurrentPage++;
        getQalist({
          type: this.type,
          perPage: this.perPage,
          currentPage: this.lcurrentPage,
        }).then((response) => {
          if (response.result.list.length != 10) {
            _this.loading = false;
          }
          _this.qalist = [...this.qalist, ...response.result.list];
        });
      }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.showScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.showScroll);
  },
};
</script>

<style lang="less" scoped>
.header {
  padding: 15px;
  padding-bottom: 5px;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0);
  position: fixed;
  left: 0;
  top: 0;
  color: #fff;
  input {
    display: block;
    height: 32px;
    border: none;
    border-radius: 20px;
    text-indent: 1em;
    margin-left: 5px;
    background-color: rgba(255, 255, 255, 0.7);
    color: #333;
    width: 80%;
    font-size: 13px;
    padding-left: 20px;
  }
  .icons {
    margin: 0;
    position: absolute;
    left: 20%;
    top: 22px;
  }
}
.qabg {
  width: 100%;
}
.showword {
  margin: -80px 15px 0;
  color: #fff;
  .num {
    background-color: rgba(0, 0, 0, 0.37);
    margin: 0 2px;
    padding: 2px;
  }
  div {
    &:first-child {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    &:last-child {
      font-size: 14px;
    }
  }
}
.showsearch {
  margin: 43px 0 0;
}
.change {
  margin: 43px 0 0;
  padding: 15px;
  display: flex;
  justify-content: space-around;
  background-color: #f1f6ff;
  font-size: 13px;
  font-weight: bold;
  .active {
    color: #45b7cb;
  }
}
.asklist {
  margin: 10px 15px 0;
  > div {
    padding: 15px 10px;
    // border-bottom: 1px solid #f1f1f1;
    background-color: #7bc8db2f;
    margin-bottom: 15px;
    border-radius: 15px;
    box-shadow: 3px 5px 12px -2px lightblue;
    .tbox {
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
      }
      span {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        margin-left: 10px;
      }
    }
    .bbox {
      display: flex;
      > img {
        padding-top: 10px;
        width: 20px;
        height: 20px;
      }
      /deep/.wcontent {
        width: 260px;
        padding: 10px 10px 0;
        font-size: 13px;
        height: 42px;
        overflow: hidden;
        p {
          margin: 0;
          line-height: 20px;
        }
      }
    }
  }
  .bottomline {
    font-size: 13px;
    color: #ccc;
    text-align: center;
    background-color: #fff !important;
  }
}
.noask {
  text-align: center;
  font-size: 12px;
  color: #333;
  img {
    width: 200px;
  }
  > div {
    margin-bottom: 10px;
  }
}
</style>